<!DOCTYPE html>
<html>
<head>
    <title>Fig 2.22 - Double Slit with Glass Plate</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // --- Define coordinates ---
        const slit_x = 100;
        const screen_x = 450;
        const center_y = 150;
        const slit_separation = 80;
        const slit_y1 = center_y - slit_separation / 2; // Top slit y
        const slit_y2 = center_y + slit_separation / 2; // Bottom slit y
        const slit_opening_height = 8;
        const p_x = screen_x;
        const p_y = center_y;

        // --- Draw Slit Barrier ---
        ctx.beginPath();
        ctx.moveTo(slit_x, 50);
        ctx.lineTo(slit_x, slit_y1 - slit_opening_height / 2);
        ctx.moveTo(slit_x, slit_y1 + slit_opening_height / 2);
        ctx.lineTo(slit_x, slit_y2 - slit_opening_height / 2);
        ctx.moveTo(slit_x, slit_y2 + slit_opening_height / 2);
        ctx.lineTo(slit_x, 250);
        ctx.stroke();

        // --- Draw Screen ---
        ctx.beginPath();
        ctx.moveTo(screen_x, 50);
        ctx.lineTo(screen_x, 250);
        ctx.stroke();
        
        // --- Draw Label P ---
        ctx.font = 'italic bold 20px serif';
        ctx.fillText('P', p_x + 10, p_y + 8);

        // --- Draw Central Axis and Light Rays ---
        ctx.beginPath();
        // Central axis
        ctx.moveTo(slit_x, center_y);
        ctx.lineTo(p_x, p_y);
        // Top ray
        ctx.moveTo(slit_x, slit_y1);
        ctx.lineTo(p_x, p_y);
        // Bottom ray
        ctx.moveTo(slit_x, slit_y2);
        ctx.lineTo(p_x, p_y);
        ctx.stroke();

        // --- Draw Glass Plate ---
        const plate_x_on_ray = 180;
        // Calculate y position on the bottom ray
        const plate_y_on_ray = slit_y2 + (p_y - slit_y2) * (plate_x_on_ray - slit_x) / (p_x - slit_x);
        const plate_width = 10;
        const plate_height = 28;
        const plate_tilt_degrees = 8;

        ctx.save();
        ctx.translate(plate_x_on_ray, plate_y_on_ray);
        ctx.rotate(plate_tilt_degrees * Math.PI / 180);
        ctx.lineWidth = 2.5;
        // The plate is drawn as an outline with a white fill to "cut through" the ray
        ctx.fillStyle = 'white';
        ctx.fillRect(-plate_width / 2, -plate_height / 2, plate_width, plate_height);
        ctx.strokeStyle = 'black';
        ctx.strokeRect(-plate_width / 2, -plate_height / 2, plate_width, plate_height);
        ctx.restore();

        // --- Draw thickness indicator for δ ---
        ctx.lineWidth = 1.5;
        const indicator_y = 225;
        const indicator_center_x = 180;
        const indicator_width = 35;
        const indicator_start_x = indicator_center_x - indicator_width / 2;
        const indicator_end_x = indicator_center_x + indicator_width / 2;

        // Find bottom corners of the tilted plate for pointer lines
        // This is a simplified visual approximation to match the sketch
        const pointer_start_y = plate_y_on_ray + plate_height / 2 - 2;
        const pointer_start_left_x = plate_x_on_ray - plate_width / 2 - 2;
        const pointer_start_right_x = plate_x_on_ray + plate_width / 2 + 2;

        ctx.beginPath();
        // Pointer lines from plate to dimension line
        ctx.moveTo(pointer_start_left_x, pointer_start_y);
        ctx.lineTo(indicator_start_x, indicator_y);
        ctx.moveTo(pointer_start_right_x, pointer_start_y);
        ctx.lineTo(indicator_end_x, indicator_y);
        // Horizontal dimension line
        ctx.moveTo(indicator_start_x, indicator_y);
        ctx.lineTo(indicator_end_x, indicator_y);
        // Ticks at the ends
        ctx.moveTo(indicator_start_x, indicator_y - 4);
        ctx.lineTo(indicator_start_x, indicator_y + 4);
        ctx.moveTo(indicator_end_x, indicator_y - 4);
        ctx.lineTo(indicator_end_x, indicator_y + 4);
        ctx.stroke();

        // Label δ
        ctx.font = 'italic bold 20px serif';
        ctx.fillText('δ', indicator_center_x - 5, indicator_y + 20);

        // --- Draw Figure Caption ---
        ctx.font = 'bold 18px sans-serif';
        ctx.fillStyle = 'black';
        ctx.fillText('Fig. 2.22', 230, 330);
    </script>
</body>
</html>